/**
 * 通讯录
 * 这个页面的代码还是比较原始的
 * @author levy
 * @date    2016/1/10
 * @signForription []
 */
(function( lf, r) {
    var ajax = lf.utils.ajax,
        pullRefresh = lf.utils.pullRefresh;

    var Person = r.createClass({
        dial:function(){
            lf.bridgeJs.dial(this.props.data.phone);
        },
        sendMessage:function(){
            let data = {
                viewCode: 'chat',
                custGlobalId: this.props.data.custGlobalId
            };

            // lf.appJs.callAppHandler('openNativeView', data);
            lf.appJs.openNativeView(data);
        },
       render:function(){
           var person = this.props.data;
           return (
               <li className="mui-table-view-cell">
                   <div className="flex-box-row">
                       <span className="person-name text-dot">{person.name}</span>
                       <div className="btn-box" ref="btnBox">
                           <a data-type="msg"  className="mui-btn lf-green-outlined-btn">发消息</a>
                           <a data-type="phone"  className="mui-btn lf-green-btn " >呼叫</a>
                       </div>
                   </div>
               </li>
           );
       },
       componentDidMount: function () {
           var $links = $(r.findDOMNode(this.refs.btnBox)).find('a'),
               me = this;

           $links.each(function () {
               let $me = $(this),
                   type = $me.data('type');

               $me.on('tap', function () {
                   if(type == 'msg')
                     me.sendMessage();
                   else
                     me.dial();
               });
           });
       },
    });

    var PersonList = React.createClass({
       render: function () {
           var persons = this.props.data.map(function(person){
               //log(person.phone)
               return (
                   <Person data={person}/>
               );
           });

           return (
               <ul className="mui-table-view">
                   {persons}
               </ul>
           );
       }
    });

    //按部门分组
    var Group = React.createClass({
        render: function () {
            var data = this.props.data,
                staffList = data.staffList,
                style = staffList.length > 0 ? 'block;' : 'none;';

            return (
                <div style={{display: style}}>
                    <div className="group">
                        {data.departmentName}
                    </div>
                    <div>
                        <PersonList data={staffList}/>
                    </div>
                </div>
            );
        }
    });

	var Body = React.createClass({
        getInitialState:function(){
            return ({addressBook:[]})
        },
        getAddressBook(userInfo) {
            ajax({
                data: {
                    staffId: userInfo.id,
                    size: 999,
                },
                success:function(data){
                    var list = data.dataList.map(function(data){
                        return <Group data={data}/>
                    });
                    this.setState({addressBook:list});
                }.bind(this),
                error: function (xhr, errorType, error) {
                    alert('请刷新重试');
                }
            },lf.api.addressBook);
        },
        componentWillMount:function(){
            lf.appJs.getUser(userInfo => {
                this.getAddressBook(userInfo);

                lf.appJs.refresh(this.getAddressBook);
            });
        },
        componentDidMount: function () {
            var callback = function () {
                setTimeout(function () {
                    mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
                    location.reload()
                },1000);
            };

            pullRefresh({container: '#pullrefresh', callback: callback});
        },
		render: function () {
            return (
            <div id="pullrefresh" className="mui-content mui-scroll-wrapper">
                <div className="mui-scroll">
                    <div className="address-book">
                        {this.state.addressBook}
                    </div>
                </div>
            </div>
            );
		}
	});


	r.render(
			<Body />,
			document.getElementById('root'), function () {
        }
	)

})( liefeng, React);
